﻿<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>选择器</title>
		<script src="./libs/jquery-3.2.1.min.js"></script>
		<script>
            $(document).ready(function () {
                $.get("http://127.0.0.1:5000/", function (data) {
                    $("#myDiv").html(data);
                })
        });
        </script>
    </head>
    <body>
        <h2>id选择器</h2>
		<p>语法：$("#id")</p>
        <div id='myDiv'>$("#id"), id选择器, id="myDiv"</div>
        <script type="text/javascript">
			$("#myDiv").css("border", "3px solid red");
        </script>

        <h2>类选择器</h2>
		<p>语法：$(".className")</p>
		<div class="myclass">div class="myclass"</div>
		<div class="myclass otherclass">div class="myClass otherclass"</div>
		<span class="myclass otherclass">span class="myClass otherclass"</span>
		<script>
			$(".myclass.otherclass").css("border","10px solid red");
		</script> 

        <h2>通过标签名获取元素</h2>
		<p>语法：$("tagName")</p>
		<mydiv>MyDIV1</mydiv>
		<mydiv>MyDIV2</mydiv>
		<span>SPAN</span>
		<script>
			$("mydiv").css("border","9px solid red");
		</script>  
    </body>
</html>